<template>
  <div class="schedule">
    <!--    功能区域-->
    <div style="margin: 10px 20px">
      <el-button type="primary" @click="add">添加</el-button>
      <!--      <el-button type="primary">导入</el-button>-->
      <!--      <el-button type="primary">导出</el-button>-->
      <!--      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%; margin-left:50px;" clearable/>-->
      <!--      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>-->

    </div>
    <!--    表格-->

    <el-tabs v-model="activeName" @tab-click="handleClick">
<!--      <el-tab-pane label="周一" name="first">-->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="120"/>
          <el-table-column prop="title" label="标题" width="180"/>
<!--          <el-table-column prop="date" label="日期" width="120"/>-->
          <el-table-column prop="week" label="日期" width="80"/>
          <el-table-column prop="time" label="时间" width="120"/>
          <el-table-column prop="classes" label="班级" width="120"/>
          <el-table-column prop="rank" label="等级" width="120"/>
          <el-table-column prop="inNum" label="已预约" width="120"/>
          <el-table-column prop="teacher" label="老师" width="120"/>
          <el-table-column prop="status" label="状态" width="120"/>
          <el-table-column prop="image" label="图片" width="300">
            <template #default="scope">
              <el-image
                  style="width: 150px; height: 100px"
                  :src="scope.row.image"
                  :preview-src-list="[scope.row.image]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <!--        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>-->
              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button type="text" size="large">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周二" name="second">-->
<!--        <el-table :data="tableData1" style="width: 100%">-->
<!--          <el-table-column prop="id" label="ID" width="120"/>-->
<!--          <el-table-column prop="title" label="标题" width="180"/>-->
<!--          &lt;!&ndash;      <el-table-column prop="date" label="日期" width="120"/>&ndash;&gt;-->
<!--          <el-table-column prop="week" label="日期" width="80"/>-->
<!--          <el-table-column prop="time" label="时间" width="120"/>-->
<!--          <el-table-column prop="classes" label="班级" width="120"/>-->
<!--          <el-table-column prop="rank" label="等级" width="120"/>-->
<!--          <el-table-column prop="teacher" label="老师" width="120"/>-->
<!--          <el-table-column prop="status" label="状态" width="120"/>-->
<!--          <el-table-column prop="image" label="图片" width="300">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 150px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]">-->
<!--              </el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default="scope">-->
<!--              &lt;!&ndash;        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>&ndash;&gt;-->
<!--              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--                <template #reference>-->
<!--                  <el-button type="text" size="large">删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周三" name="third">-->
<!--        <el-table :data="tableData2" style="width: 100%">-->
<!--          <el-table-column prop="id" label="ID" width="120"/>-->
<!--          <el-table-column prop="title" label="标题" width="180"/>-->
<!--          &lt;!&ndash;      <el-table-column prop="date" label="日期" width="120"/>&ndash;&gt;-->
<!--          <el-table-column prop="week" label="日期" width="80"/>-->
<!--          <el-table-column prop="time" label="时间" width="120"/>-->
<!--          <el-table-column prop="classes" label="班级" width="120"/>-->
<!--          <el-table-column prop="rank" label="等级" width="120"/>-->
<!--          <el-table-column prop="teacher" label="老师" width="120"/>-->
<!--          <el-table-column prop="status" label="状态" width="120"/>-->
<!--          <el-table-column prop="image" label="图片" width="300">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 150px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]">-->
<!--              </el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default="scope">-->
<!--              &lt;!&ndash;        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>&ndash;&gt;-->
<!--              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--                <template #reference>-->
<!--                  <el-button type="text" size="large">删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周四" name="fourth">-->
<!--        <el-table :data="tableData3" style="width: 100%">-->
<!--          <el-table-column prop="id" label="ID" width="120"/>-->
<!--          <el-table-column prop="title" label="标题" width="180"/>-->
<!--          &lt;!&ndash;      <el-table-column prop="date" label="日期" width="120"/>&ndash;&gt;-->
<!--          <el-table-column prop="week" label="日期" width="80"/>-->
<!--          <el-table-column prop="time" label="时间" width="120"/>-->
<!--          <el-table-column prop="classes" label="班级" width="120"/>-->
<!--          <el-table-column prop="rank" label="等级" width="120"/>-->
<!--          <el-table-column prop="teacher" label="老师" width="120"/>-->
<!--          <el-table-column prop="status" label="状态" width="120"/>-->
<!--          <el-table-column prop="image" label="图片" width="300">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 150px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]">-->
<!--              </el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default="scope">-->
<!--              &lt;!&ndash;        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>&ndash;&gt;-->
<!--              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--                <template #reference>-->
<!--                  <el-button type="text" size="large">删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周五" name="fifth">-->
<!--        <el-table :data="tableData4" style="width: 100%">-->
<!--          <el-table-column prop="id" label="ID" width="120"/>-->
<!--          <el-table-column prop="title" label="标题" width="180"/>-->
<!--          &lt;!&ndash;      <el-table-column prop="date" label="日期" width="120"/>&ndash;&gt;-->
<!--          <el-table-column prop="week" label="日期" width="80"/>-->
<!--          <el-table-column prop="time" label="时间" width="120"/>-->
<!--          <el-table-column prop="classes" label="班级" width="120"/>-->
<!--          <el-table-column prop="rank" label="等级" width="120"/>-->
<!--          <el-table-column prop="teacher" label="老师" width="120"/>-->
<!--          <el-table-column prop="status" label="状态" width="120"/>-->
<!--          <el-table-column prop="image" label="图片" width="300">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 150px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]">-->
<!--              </el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default="scope">-->
<!--              &lt;!&ndash;        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>&ndash;&gt;-->
<!--              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--                <template #reference>-->
<!--                  <el-button type="text" size="large">删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周六" name="sixth">-->
<!--        <el-table :data="tableData5" style="width: 100%">-->
<!--          <el-table-column prop="id" label="ID" width="120"/>-->
<!--          <el-table-column prop="title" label="标题" width="180"/>-->
<!--          &lt;!&ndash;      <el-table-column prop="date" label="日期" width="120"/>&ndash;&gt;-->
<!--          <el-table-column prop="week" label="日期" width="80"/>-->
<!--          <el-table-column prop="time" label="时间" width="120"/>-->
<!--          <el-table-column prop="classes" label="班级" width="120"/>-->
<!--          <el-table-column prop="rank" label="等级" width="120"/>-->
<!--          <el-table-column prop="teacher" label="老师" width="120"/>-->
<!--          <el-table-column prop="status" label="状态" width="120"/>-->
<!--          <el-table-column prop="image" label="图片" width="300">-->
<!--            <template #default="scope">-->
<!--              <el-image-->
<!--                  style="width: 150px; height: 100px"-->
<!--                  :src="scope.row.image"-->
<!--                  :preview-src-list="[scope.row.image]">-->
<!--              </el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column fixed="right" label="操作" width="120">-->
<!--            <template #default="scope">-->
<!--              &lt;!&ndash;        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>&ndash;&gt;-->
<!--              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">-->
<!--                <template #reference>-->
<!--                  <el-button type="text" size="large">删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="周日" name="seventh">-->
<!--        -->
<!--      </el-tab-pane>-->
    </el-tabs>





    <!--    弹出框-->
    <el-dialog v-model="dialogVisible" title="" width="30%">

      <el-form :model="form" label-width="120px">
        <el-form-item label="日期">
          <el-select v-model="form.week" placeholder="请选择">
            <el-option v-for="item in week" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="时间">
          <el-time-select placeholder="起始时间" v-model="form.startTime" :picker-options="{
            start: '08:30',step: '00:15',end: '18:30'}">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="form.endTime" :picker-options="{
            start: '08:30',step: '00:15',end: '18:30'}">
          </el-time-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="班级">
          <el-select v-model="form.classes" placeholder="请选择">
            <el-option v-for="item in options" :key="item.className" :label="item.className" :value="item.className">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="限制人数">
          <el-input v-model="form.maxNum" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="等级">
          <el-select v-model="form.rank" placeholder="请选择">
            <el-option v-for="item in rank" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="老师">
          <el-select v-model="form.teacher" clearable placeholder="请选择" @change="choiceType">
            <el-option
                v-for="item in teacherList" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form label-width="120px">
        <el-form-item label="图片">
          <el-upload ref="upload" :on-success="uploadSuccess"
                     action="http://localhost:9090/files/upload" list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <div class="demo-pagination-block">
      <!--      <span class="demonstration">All combined</span>-->
      <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  name: 'schedule',
  components: {},


  data() {
    return {
      activeName:'first',
      search: '',
      form: {},
      dialogVisible: false,
      tableData: [],
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      options: [],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      teacherList: [],
      week: [{
        value: '周一',
        label: '周一'
      }, {
        value: '周二',
        label: '周二'
      }, {
        value: '周三',
        label: '周三'
      }, {
        value: '周四',
        label: '周四'
      }, {
        value: '周五',
        label: '周五'
      },{
        value: '周六',
        label: '周六'
      },{
        value: '周日',
        label: '周日'
      }],
      value: '',
      rank: [{
        value: '启蒙',
        label: '启蒙'
      }, {
        value: '基础',
        label: '基础'
      }, {
        value: '提升',
        label: '提升'
      }, {
        value: '进阶',
        label: '进阶'
      }],


    }
  },

  created() {
    this.load(),
        this.getTeacher()


    // this.getCurrentTime(),
    //     this.$nextTick(() => {
    //       setInterval(this.getCurrentTime, 1800000);
    //     });

// this.getCurrentTime()

  },

  methods: {
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = hh;
      if (_this.gettime > 18) {
        request.put("/schedule/update")
      }
    },
    uploadSuccess(res) {
      console.log(res)
      this.form.image = res.data;

    },
    getTeacher() {
      request.get("/user", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        res.data.records.forEach(v => {
          if (v.role === 3) {
            this.teacherList.push(v)
          }
        })
      })

    },
    load() {
      request.get("/schedule/Query", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

      request.get("/schedule/classes").then(res => {
        console.log(res)
        this.options = res.data

      })
    },


    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    add() {
      this.dialogVisible = true
      this.form = {}
      if (this.$refs['upload']) {
        this.$refs['upload'].clearFiles()  // 清除历史文件列表
      }
    },
    save() {
      if (this.form.id) {
        request.put("/schedule/update", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      } else {
        request.post("/schedule", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      }
    },
    handleDelete(id) {
      console.log(id)
      request.delete("/schedule/" + id).then(res => {
        if (res.code === '0') {
          this.$messageBox({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$messageBox({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    handleSizeChange(pageSize) {     //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  //改变当前页码触发
      this.currentPage4 = pageNum
      this.load()
    },

  },
}


</script>

<style scoped>

</style>